<template>
  <div class="app-container">

    <div style="margin-bottom:5px">
      <el-input v-model="searchTitle" placeholder="请输入要查找的试卷2" size="small" style="width:30%"/>
      <el-button type="primary" size="small" @click="fetchData(0)">查找</el-button>
      <el-button v-if="!hiddenCheckBox" type="primary" size="small" @click="toggleCheckBox" >创建考卷</el-button>
      <el-button v-if="hiddenCheckBox" type="primary" size="small" @click="centerDialogVisible = true">完成</el-button>
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      :row-key="getRowKeys"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
      size="small"
      @selection-change="handleSelectionChange">
      <el-table-column
        v-if="hiddenCheckBox"
        :reserve-selection="true"
        type="selection"
        width="55"/>
      <el-table-column align="center" label="ID" width="45">
        <template slot-scope="scope">
          {{ scope.row.id }}
        </template>
      </el-table-column>
      <el-table-column label="试卷">
        <template slot-scope="scope">
          {{ scope.row.title }}
        </template>
      </el-table-column>
      <el-table-column label="上传教师" width="110" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.createBy }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="created_at" label="创建时间" width="200">
        <template slot-scope="scope">
          <i class="el-icon-time"/>
          <span>{{ currentDateTime }}</span>
        </template>
      </el-table-column>

    </el-table>
    <el-pagination
      :total="total"
      :page-size="pageSize"
      background
      layout="prev, pager, next"
      @current-change="handleCurrentChange"/>
    <el-dialog
      :visible.sync="centerDialogVisible"
      title="提示"
      width="30%"
      center>
      <span>
        <el-input v-model="title" placeholder="请输入内容"/>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="createUserTest">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getList } from '@/api/item'
import { create } from '@/api/test'
import { getToken } from '@/utils/auth'
export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        1: '选择题',
        2: '主观题'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      searchTitle: '',
      list: null,
      listLoading: true,
      total: 0,
      pageSize: 20,
      currentDateTime: new Date(),
      hiddenCheckBox: false,
      currentSelection: [],
      centerDialogVisible: false,
      title: ''
    }
  },
  created() {
    this.fetchData(0)
  },
  methods: {
    // 生成试卷
    createUserTest() {
      console.log(this.title)
      var token = getToken()
      create(this.title, this.currentSelection, token)
      this.toggleCheckBox()
      this.centerDialogVisible = false
    },
    // 切换多选框
    toggleCheckBox() {
      this.hiddenCheckBox = !this.hiddenCheckBox
    },
    getRowKeys(row) {
      return row.id
    },
    // 分页
    handleCurrentChange(currentPageNum) {
      this.fetchData(currentPageNum)
    },
    // 获取数据
    fetchData(currentPageNum) {
      this.listLoading = false
      getList(this.searchTitle, currentPageNum, 20).then(resp => {
        this.list = resp.data
        this.total = resp.total
        this.pageSize = resp.pageSize
      })
    },
    // table相关
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    handleSelectionChange(selectionList) {
      this.currentSelection = []
      selectionList.forEach(x => {
        this.currentSelection.push(x.id)
      })
    }
  }
}
</script>
